<template>
    <el-container style="height: 100vh;">
      <!-- 主内容区域 -->
      <el-main class="main-content">
        <!-- 搜索框 -->
        <div class="search-container">
          <el-input 
            v-model="searchQuery" 
            placeholder="请输入搜索内容" 
            prefix-icon="el-icon-search" 
            @input="handleSearch"
            style="width: 300px;"
          >
          </el-input>
          <el-button type="primary" @click="searchPosts" class="search-btn">搜索</el-button>
        </div>
  
        <div class="share-page">
          <!-- 帖子列表 -->
          <el-card v-for="(post, index) in posts" :key="index" class="post-card" shadow="hover">
            <!-- 帖子头部：用户头像和信息 -->
            <div class="post-header">
              <el-avatar :src="post.avatar" size="small" class="avatar"></el-avatar>
              <div class="user-info">
                <span class="username">{{ post.username }}</span>
                <span class="post-time">{{ post.time }}</span>
              </div>
            </div>
  
            <!-- 帖子标题 -->
            <div class="post-title">
              <span>{{ post.title }}</span>
            </div>
  
            <!-- 帖子内容 -->
            <div class="post-content">
  <p>{{ post.content }}</p>

  <!-- 图片展示 -->
  <div v-if="post.images.length" class="post-images">
    <el-image
      v-for="(image, imgIndex) in post.images"
      :key="imgIndex"
      :src="image"
      class="post-image"
      fit="cover"
    ></el-image>
  </div>

  <!-- 视频展示 -->
  <div v-if="post.videos.length" class="post-videos">
    <video 
      v-for="(video, videoIndex) in post.videos" 
      :key="videoIndex"
      :src="video"
      controls 
      class="post-video"
    ></video>
  </div>
</div>


            
  
            <!-- 帖子操作：点赞和评论 -->
            <div class="post-footer">
              <el-button type="text" class="like-btn" @click="likePost(index)">
                👍 {{ post.likes }}
              </el-button>
              <el-button type="text" class="comment-btn" @click="toggleCommentForm(index)">
                💬 评论
              </el-button>
            </div>
  
            <!-- 评论表单 -->
            <div v-if="post.showCommentForm" class="comment-form">
              <el-input 
                v-model="post.newComment" 
                type="textarea" 
                placeholder="请输入评论内容..." 
                rows="4"
                class="comment-input"
              ></el-input>
              <el-button type="primary" @click="submitComment(index)" class="submit-btn">提交评论</el-button>
            </div>
  
            <!-- 显示评论列表 -->
            <div v-if="post.comments.length" class="comment-list">
              <h4>评论:</h4>
              <el-divider></el-divider>
              <el-card v-for="(comment, commentIndex) in post.comments" :key="commentIndex" class="comment-card">
                <div class="comment-author-time">
                  <span class="comment-author">{{ comment.author }}</span>
                  <span class="comment-time">{{ comment.timestamp }}</span>
                </div>
                <div class="comment-content">{{ comment.content }}</div>
              </el-card>
            </div>
          </el-card>
        </div>
      </el-main>
  
      <!-- 固定底部发布按钮 -->
      <div class="floating-btn" @click="openPostForm">+</div>
    </el-container>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import { useRouter } from 'vue-router'; // 使用 useRouter 以访问路由功能
  import { ElCard, ElAvatar, ElButton, ElInput, ElDivider } from 'element-plus';
  
  // 路由实例
  const router = useRouter();
  
  // 模拟的帖子数据
  const posts = ref([
  {
    username: '用户1',
    avatar: 'https://i.pravatar.cc/40?img=1',
    title: '帖子标题1',
    content: '这是帖子的内容1，展示一些简单的文字内容，描述一些分享内容。',
    time: '2024-10-20 10:30',
    likes: 12,
    showCommentForm: false,
    newComment: '',
    comments: [],
    images: ['https://th.bing.com/th?id=OIP.54qlbLNAZ64K94c_DCT-qAAAAA&w=166&h=166&c=8&rs=1&qlt=90&o=6&dpr=1.9&pid=3.1&rm=2', 'https://th.bing.com/th?id=OIP.54qlbLNAZ64K94c_DCT-qAAAAA&w=166&h=166&c=8&rs=1&qlt=90&o=6&dpr=1.9&pid=3.1&rm=2'], // 图片URL数组
    videos: ['https://example.com/video1.mp4'] // 视频URL数组
  },
  // 其他帖子数据...
]);

  
  // 打开发帖表单的功能
  const openPostForm = () => {
    router.push({ name: 'PostPage' }); // 跳转到发帖页面
  };
  
  // 点赞功能
  const likePost = (index) => {
    posts.value[index].likes += 1;
  };
  
  // 切换评论表单显示与否
  const toggleCommentForm = (index) => {
    posts.value[index].showCommentForm = !posts.value[index].showCommentForm;
  };
  
  // 提交评论
  const submitComment = (index) => {
    const newComment = posts.value[index].newComment.trim();
    if (newComment) {
      const comment = {
        author: '匿名用户',
        timestamp: new Date().toLocaleString(),
        content: newComment
      };
      posts.value[index].comments.push(comment);
      posts.value[index].newComment = '';
      posts.value[index].showCommentForm = false;
    }
  };
  </script>
  
  <style scoped>
.search-container {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  align-items: center;
}

.el-input {
  margin-right: 10px;
}

/* 按钮样式 */
.search-btn {
  height: 36px;
  line-height: 36px;
}
  /* 页面总体样式 */
  .share-page {
    max-width: 800px;
    margin: 0 auto;
    overflow: hidden; /* 禁用滚动条 */
    padding: 20px;
  }
  
  .page-title {
    text-align: center;
    margin-bottom: 20px;
    font-size: 24px;
    color: #333;
  }
  
  .el-container {
    height: 100vh;
    overflow: hidden; /* 禁用滚动条 */
  }
  
  /* 每个帖子卡片 */
  .post-card {
    margin-bottom: 20px;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  
  .post-header {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid #f0f0f0;
  }
  
  .avatar {
    margin-right: 10px;
  }
  
  .user-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .username {
    font-size: 16px;
    font-weight: bold;
    color: #409EFF;
  }
  
  .post-time {
    font-size: 12px;
    color: #999;
  }
  
  .post-title {
    padding: 10px 15px;
    font-size: 18px;
    font-weight: bold;
    color: #333;
  }
  
  .post-content {
    padding: 15px;
    font-size: 16px;
    line-height: 1.6;
    color: #666;
  }
  
  .post-footer {
    display: flex;
    justify-content: space-between;
    padding: 10px 15px;
  }
  
  .like-btn,
  .comment-btn {
    color: #409EFF;
  }
  
  /* 评论区域样式 */
  .comment-form {
    padding: 10px 15px;
  }
  
  .comment-input {
    width: 100%;
    margin-bottom: 10px;
  }
  
  .submit-btn {
    display: block;
    margin-top: 10px;
  }
  
  .comment-list {
    padding: 10px 15px;
  }
  
  .comment-card {
    margin-bottom: 10px;
    border-left: 3px solid #409EFF;
    padding-left: 10px;
  }
  
  .comment-author-time {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #999;
  }
  
  .comment-author {
    font-weight: bold;
    color: #409EFF;
  }
  
  .comment-content {
    font-size: 14px;
    color: #666;
  }
  
  /* 固定底部按钮样式 */
  .floating-btn {
  position: fixed;
  bottom: 55px;  /* 保持距离底部55px */
  left: 50%;     /* 使用50%将其水平居中 */
  transform: translateX(-50%); /* 使用 translateX 向左偏移按钮的一半宽度，使其精确居中 */
  width: 60px;
  height: 60px;
  background-color: #409EFF;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  z-index: 10;
}

  
  .floating-btn:hover {
    background-color: #66b1ff; /* 鼠标悬停时改变背景色 */
  }
  .post-images {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.post-image {
  width: 100px;
  height: 100px;
  border-radius: 5px;
  overflow: hidden;
}

.post-videos {
  margin-top: 10px;
}

.post-video {
  width: 100%;
  max-height: 300px;
  border-radius: 5px;
}

  </style>
  